import React, { Component } from 'react';
import WeUI from 'react-weui';

import IconHome from '../media/img/home.png';
import IconUser from '../media/img/user.png';
import BDBookItem from './book/bookitem';

import 'weui';
import 'react-weui/build/packages/react-weui.css';

const { 
    Tab, 
    TabBody, 
    TabBar, 
    TabBarItem, 
    Panel, 
    PanelBody, 
    SearchBar
} = WeUI;

export default class BDTab extends Component {
    // 搜索栏
    // 列表页
    // 底部栏
    constructor(props) {
        super(props);
    }

    clickHandle(url){
        this.props.history.push(url);
    }

    render() {
        let items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        return (
            <Tab>
                <TabBody>

                    <Panel>
                        <PanelBody>
                        <SearchBar placeholder="请输入您要查找的图书" lang={{cancle: '取消'}} />
                        {
                            items.map((item, i) => {
                                return (
                                    <BDBookItem  key={i} history={this.props.history} />
                                )
                            })
                        }
                        </PanelBody>
                    </Panel>
                </TabBody>
                
                <TabBar>
                    <TabBarItem active={true} icon={<img src={IconHome} />} label="书单" active={true} />
                    <TabBarItem icon={<img src={IconUser} />} label="我" active={false} onClick={this.clickHandle.bind(this,  '/user')} />
                </TabBar>
            </Tab>
        );
    }
};